#include("header.html")
<style>
    .pager {
        margin: 0;
    }
    .pager li > a {
        display: inline-block;
        padding: 4px 10px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 12px;
        font-size: 12px;
        color: #000;
        margin-bottom: 8px;
    }
    .pager select {
        height: 27px;
        border-radius: 12px;
        font-size: 12px;
        border: 1px solid #ddd;
    }
</style>
<script>
    $(function () {
        var totalPages = ${pages.totalPages};
        var page  = $('select[name=pageNo]');
        var shop  = $('select[name=shop_id]');
        var stage = $('select[name=stage_id]');
        var tbody = $('.table tbody');
        // 动态加载
        $('select').change(function (e) {
            var pageNo   = page.val() || 1;
            var shop_id  = shop.val();
            var stage_id = stage.val();

            getData(pageNo, shop_id, stage_id);
        });

        // 分页加载
        $('.pager').on('click', 'a', function (e) {
            var shop_id  = shop.val();
            var stage_id = stage.val();
            if (e.target.innerHTML === '上一页') {
                if (parseInt(page.val()) - 1 > 0)
                    getData(parseInt(page.val()) - 1, shop_id, stage_id);
            } else {
                if (parseInt(page.val()) + 1 <= totalPages)
                    getData(parseInt(page.val()) + 1, shop_id, stage_id);
            }
        });

        /**
         * 发送post请求获取数据
         */
        function getData(pageNo, shop_id, stage_id) {
            $.post('/markRecord/page', {
                pageNo: pageNo,
                stage_id: stage_id,
                shop_id: shop_id
            }, function (data) {
                fillData(data.data);
            });
        }

        /**
         * 传入分页数据并展示出来
         * @param pd 分页数据
         */
        function fillData(pd) {
            page.html('');
            tbody.html('<tr><td colspan="4" align="center">暂无数据</td></tr>');
            if (pd !== null) {
                if (pd.totalPages > 1) {
                    $('#page-div').removeClass('hidden');
                    for (var i = 1; i <= pd.totalPages; i++) {
                        var select = '';
                        if (pd.number + 1 == i) {
                            select = 'selected';
                        }
                        page.append('<option value="'+ i +'" '+ select +'>' + i + '</option>');
                    }
                } else {
                    $('#page-div').addClass('hidden');
                }

                if (pd.numberOfElements > 0) {
                    tbody.html('');
                    $.each(pd.content, function (k, v) {
                        var tr = '<tr>\n' +
                            '    <td>'+ v.shop.name +'</td>\n' +
                            '    <td>'+ v.stage.name +'</td>\n' +
                            '    <td><span class="star-'+ v.star +'"></span></td>\n' +
                            '    <td>'+ getDateTime(v.time) +'</td>\n' +
                            '</tr>';
                        tbody.append(tr);
                    });
                }
            }
        }

        /**
         * 根据时间簇 获得规定格式的时间
         */
        function getDateTime(tm) {
            var time = new Date(tm);
            return time.getFullYear() + '/' +(parseInt(time.getMonth()) + 1) + "/" + time.getDate() + " " +
                time.getHours() + ':' + time.getMinutes();
        }
    });
</script>
<div class="container">
    <div class="box box-success">
        <div class="box-header">
            <div class="text-center dropup">
                <span class="h-title">打分记录</span>
                <div id="loading" class="hidden" style="position: absolute; right: 15px; top: 12px;">
                    <img class="" width="20" src="/static/images/loading.jpg">
                </div>
            </div>
        </div>
        <div class="box-body">
            <div class="clearfix">
                <div class="select-group pull-left">
                    <select name="shop_id" class="form-control">
                        <option value="">全部公司</option>
                        #for(Shop shop : shops)
                        <option value="${shop.id}">${shop.name}</option>
                        #else
                        <option>暂无物业</option>
                        #end
                    </select>
                </div>
                <div class="select-group pull-right">
                    <select name="stage_id" class="form-control">
                        <option value="">全部阶段</option>
                        #for(Stage stage : stages)
                        <option value="${stage.id}">${stage.name}</option>
                        #else
                        <option>暂无阶段</option>
                        #end
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered text-center">
                    <thead>
                    <tr>
                        <td>物业</td>
                        <td>阶段</td>
                        <td>星级</td>
                        <td>时间</td>
                    </tr>
                    </thead>
                    <tbody>
                    #for(MarkRecord rd : pages.content)
                        <tr>
                            <td>${rd.shop.name ?! ''}</td>
                            <td>${rd.stage.name ?! ''}</td>
                            <td><span class="star-${rd.star ?! '0'}"></span></td>
                            <td>${rd.time.format('yyyy/MM/dd HH:mm')}</td>
                        </tr>
                    #else
                        <tr><td class="text-center" colspan="4">暂无记录</td></tr>
                    #end
                    </tbody>
                </table>
            </div>
            #if(pages.totalPages > 1)
            <div id="page-div" class="col-lg-12 col-xs-12 text-center">
                <ul class="pager">
                    <li><a href="javascript:">上一页</a></li>
                    <select name="pageNo">
                        #for(int i : range(1, pages.totalPages))
                        <option value="${i}">第${i}页</option>
                        #end
                    </select>
                    <li><a href="javascript:">下一页</a></li>
                </ul>
            </div>
            #end
            #include("sign.html")
        </div>
    </div>
</div>

</body>
</html>